<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>团课列表</title>

    <script src="js/flexible.js"></script>

    <link rel="stylesheet" href="css/flexible.css">

    <link rel="stylesheet" href="css/reset.css">

    <link rel="stylesheet" href="css/style.css">

    <link rel="stylesheet" href="css/mobiscroll.custom-3.0.0-beta6.min.css">

    <link rel="stylesheet" href="css/vant.css">

    <script src="js/jquery-3.3.1.min.js"></script>

    <script src="js/vue/vue.js"></script>

    <script src="js/vue/axios.js"></script>

    <script src="js/vue/MD5.js"></script>

    <script src="js/vue/vant.js"></script>

    <script src="js/mobiscroll.custom-3.0.0-beta6.min.js"></script>

    <script src="js/vue/qs.js"></script>

    <script src="js/wxJs.js"></script>

    <style>
        .borderPj {

            height: 0.22rem;

            line-height: 0.22rem;

            border: 0.01rem solid #0E9CFA;

            text-align: center;

            color: #0E9CFA;

            font-size: 0.12rem;

            padding: 0 0.05rem;

            background: #0E9CFA;

            margin-right: -0.16rem;

        }

        .borderPj a {

            color: #fff;

        }

        .kcywg {

            margin-right: -0.16rem;

            padding: 0.02rem;

            width: .6rem;

        }

        /* 20200325xinzheng */

        .curriculum_kc {

            position: relative !important;

        }

        .curriculum_kc .content {

            width: 2.5rem;

        }

        .curriculum_kc .btn {

            position: absolute;

            right: 0.1rem;

            bottom: 0.4rem;

        }

        .btn .qxOrder {

            height: 0.22rem;

            line-height: 0.22rem;

        }
    </style>

</head>

<body>

    <div id="app">

        <div class="curriculum_head">

            <div ref="rl" class="rl">

                <img src="images/rl.png">

                <input id="age">

            </div>

            <div class="rq">

                <template>

                    <ul>

                        <li v-for="item in dateList" :key="item.time" @click="selectDate(item.time)"
                            v-bind:class="{rq_check:item.check=='1'}">

                            <span class="s">{{item.week}}</span><br>

                            <span class=" x">{{item.date}}</span>

                        </li>

                    </ul>

                </template>

            </div>

            <div class="clear"></div>

        </div>

        <div class="h10 sbawow" style="background-color: rgba(237,237,237,0.5)"></div>

        <div class="curriculum_list" v-if="curriculumList.length>0">

            <div class="curriculum_kc" v-for="(item,index) in curriculumList" :key="item.index">

                <template>

                    <div class="tx">

                        <img :src="item.picurl" onerror="this.src='images/yujiake.jpg'">

                    </div>

                    <div class="content">

                        <div class="title fl">{{item.title}}</div>

                        <div class="name fl">{{item.Sname}}</div>

                        <div class="clear h10"></div>

                        <div class="kcmdSm">课程难度：

                            <span v-if="item.level=='1'">毫无难度 <span class="levelSm">（适合所有用户）</span></span>

                            <span v-else-if="item.level=='2'">初学<span class="levelSm">（适合运动小白）</span></span>

                            <span v-else-if="item.level=='3'">适中<span class="levelSm">（适合有运动基础用户）</span></span>

                            <span v-else-if="item.level=='4'">进阶<span class="levelSm">（适合运动能力较好用户）</span></span>

                            <span v-else>强化<span class="levelSm">（运动达人）</span></span>

                        </div>

                        <div class="trainingTargets" v-if="item.Target.length>0">

                            <div class="lf">训练目标：</div>

                            <div class="lf">

                                <ul>

                                    <li v-for="(itemTarget,index) in item.Target" :key="index">
                                        {{itemTarget?itemTarget.name:''}}</li>

                                </ul>

                            </div>

                        </div>

                        <div class="clear h10"></div>

                        <div class="address fl">{{item.Space}}</div>

                        <div class="time fl">{{item.stime}}-{{item.etime}}</div>

                        <div class="clear h10"></div>

                        <div class="yy fl">预约 {{item.yyNum}}/{{item.max}}</div>

                        <div class="num fl">预约满{{item.min}}人开课</div>

                        <div class="clear h10"></div>

                        <div v-if="item.user_pic_arr">
<!-- 
                            <div class="hytx">

                                <img v-for="items in item.user_pic_arr" :src="items" onerror="this.src='images/tx.png'"
                                    alt="会员头像">

                                <div class="borderPj" style="float: right;"
                                    v-if="item.yy_state=='4'&&item.e_state=='0'">

                                    <a href="#" @click="pingjia(item.plan_id,0,item.date,item.stime)">评价本节课</a>

                                </div>

                                <div @click="kcDetails(item.date,item.key,item.currid,item.plan_id,item.e_state)"
                                    style="float:right;" class="qxOrder kcywg"
                                    v-if="item.yy_state=='4'&&item.e_state=='1'">

                                    课程详情

                                </div>

                            </div> -->

                            <div class="clear"></div>

                            <div class="ts">他们都来上课了哦~</div>

                        </div>

                        <div class="clear"></div>

                    </div>

                    <div class="btn" v-if="item.IsFormality == 0">

                        <div v-if="item.yy_state=='0'" class="qxOrder">预约已过</div>

                        <div @click="classDetial(item.date,item.key,item.currid,item.plan_id,item.IsFormality)"
                            v-else-if="item.yy_state=='1'" class="an">

                            预约

                        </div>

                        <div v-else-if="item.yy_state=='2'" class="an qxOrder">预约已满</div>

                        <div v-else-if="item.yy_state=='3'" class="an">

                            <div @click="sign(item.uboid)">签到</div>

                            <div @click="qxCancel(item.uboid)" class="qxOrder">取消预约</div>

                        </div>

                        <div v-else-if="item.yy_state=='5'" class="qxOrder">已违约</div>

                        <div v-else></div>

                    </div>

                    <div class="btn" v-else>

                        <div @click="classDetial(item.date,item.key,item.currid,item.plan_id,item.IsFormality)"
                            class="an">

                            详情

                        </div>

                    </div>

                    <div class="clear"></div>

                </template>

            </div>

        </div>

        <div class="notDate" v-else style="margin-top: .3rem;text-align: center;">

            <img src="images/notDate.jpg" />

        </div>

        <div style="height: 0.45rem;"></div>

        <div class="down">

            <div class="nav">

                <a href="index.html">

                    <img src="images/sy.png" alt="首页"><br>

                    <span>首页</span>

                </a>

            </div>

            <div class="nav navActive">

                <a href="curriculum_t.html">

                    <img src="images/tk_c.png" alt="团课"><br>

                    <span>团课</span>

                </a>

            </div>

            <div class="nav">

                <a href="curriculum_p.html">

                    <img src="images/sj.png" alt="私课"><br>

                    <span>私课</span>

                </a>

            </div>

            <div class="nav">

                <a href="shopindex.html">

                    <img src="images/sc.png" alt="商城"><br>

                    <span>商城</span>

                </a>

            </div>

            <div class="nav ">

                <a href="my.html">

                    <img src="images/more.png" alt="更多"><br>

                    <span>更多</span>

                </a>

            </div>

        </div>

    </div>

</body>

<script>
    var vm = new Vue({

        el: '#app',

        data: {

            show: false,

            widths: '',

            date: '',

            dateList: [],

            curriculumList: [],

            currentDate: new Date(),

            endTimePop: false,

            vids: '',

        },

        created() {

            let time = ''

            this.getlists(time)

        },

        methods: {

            confirm(val) {

                console.log(val) // 打印出了时间

            },

            change(e) {

                console.log(e.getValues()) // 打印出了选中的时间，是个数组

            },

            getlists(time) {

                this.vids = sessionStorage.getItem('Vid')

                window.vant.Toast.loading({

                    mask: true,

                    message: '加载中...'

                });

                const params = {

                    date: time

                }

                //console.log(params)

                getVs()

                axios.get('/mobileapi/member/curriculum_t.php?act=tkList', {
                    params: params
                }).then(data => {

                    console.log(data.data)

                    let {
                        msg,
                        code,
                        user
                    } = data.data

                    if (code !== 200) {

                        _this.$message({

                            message: msg,

                            type: 'error'

                        });

                    } else {

                        window.vant.Toast.clear();

                        data = data.data

                        this.curriculumList = data.data

                        this.dateList = data.date_list

                        console.log(this.dateList)

                    }

                }).catch(function (error) {

                    console.log(error);

                });

            },



            //签到

            sign(id) {

                let from = {

                    id: id

                }

                from = JSON.stringify(from)

                let sign = md5(from)

                const params = {

                    from: from,

                    sign: sign

                }

                //console.log(params)

                getVs()

                axios.post('/mobileapi/member/curriculum_t.php?act=YYSign', Qs.stringify(params)).then(data => {

                    console.log(data.data)

                    let {
                        msg,
                        code,
                        user
                    } = data.data

                    if (code !== 200) {

                        window.vant.Toast.fail(data.data.msg);

                    } else {

                        window.vant.Toast.success('签到成功')

                        this.timer = setTimeout(this.getlists(this.date), 2000);

                        //this.getlists()

                    }

                }).catch(function (error) {

                    console.log(error);

                });

            },

            //取消预约

            qxCancel(id) {

                let from = {

                    id: id

                }

                from = JSON.stringify(from)

                let sign = md5(from)

                const params = {

                    from: from,

                    sign: sign

                }

                //console.log(params)

                getVs()

                axios.post('/mobileapi/member/curriculum_t.php?act=YYCancel', Qs.stringify(params)).then(
                    data => {

                        console.log(data.data)

                        let {
                            msg,
                            code,
                            user
                        } = data.data

                        if (code !== 200) {

                            window.vant.Toast.fail(data.data.msg);

                        } else {

                            window.vant.Toast.success('预约取消成功')

                            this.timer = setTimeout(this.getlists(this.date), 2000);

                            //this.getlists()

                        }

                    }).catch(function (error) {

                    console.log(error);

                });

            },

            //选择日期

            selectDate(time) {

                this.date = time

                this.getlists(time)

            },

            order(date, key, currid, plan_id) {

                window.location.href = 'curriculum_t_yvyue.html?date=' + date + '&key=' + key + '&currid=' +
                    currid + '&plan_id=' + plan_id + ''

            },

            //选择日历

            classDetial(date, key, currid, plan_id, IsFormality) {

                window.location.href = 'curriculum_t_yvyue.html?date=' + date + '&key=' + key + '&currid=' +
                    currid + '&plan_id=' + plan_id + '&IsFormality=' + IsFormality;

            },

            //评价

            pingjia(Currid, type, Cdate, Ctime) {

                window.location.href = 'pingjia.html?currid=' + Currid + '&type=' + type + '&Ctime=' + Ctime +
                    '&Cdate=' + Cdate + ''

            },

            //课程详情

            kcDetails(date, key, currid, plan_id, finish) {

                window.location.href = 'curriculum_t_yvyue.html?date=' + date + '&key=' + key + '&currid=' +
                    currid + '&plan_id=' + plan_id + '&finish=' + finish + ''

            }

        }

    })

    $('#age').mobiscroll().date({

        theme: 'mobiscroll',

        display: 'bottom',

        lang: 'zh',

        defaultValue: new Date(),

        dateFormat: 'yyyy-mm-dd',

        startYear: 1940,

        endYear: 2025,

        onClose() {

            console.log("4444")

            if ($("#age").val() != "") {

                var date = $("#age").val();

                console.log(date);

                vm.getlists(date);

            }

        }

    });
</script>

</html>